import React, {useEffect, useRef, useState} from 'react';
import {ModalForm} from "@ant-design/pro-form";
import type {ProFormInstance} from "@ant-design/pro-form";
import { ProFormText} from "@ant-design/pro-form";
import {queryAllIcon} from "@/pages/m/User/Account/settings/components/service";
import {Avatar, Col, Row} from "antd";
import {Selector} from "antd-mobile";

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<any>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  modalVisible: boolean;
  values: Partial<any>;
};

const IconUpdateForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const [defaultType, setDefaultType] = useState<string[]>([])


  useEffect(()=>{
    console.log(props.values)
    if (props.values){
      formRef.current?.setFieldsValue({
        name: props.values?.name,
        icon: props.values?.icon
      })
      setDefaultType([props.values?.icon])
    }

  }, [props.values])

  // 从后台获取所有Icon
  const [iconSource, setIconSource] = useState<any[]>([])
  useEffect(() => {
    queryAllIcon().then((res)=>{
      if (res.status === "done"){
        // 数据获取成功
        // 整理list为prolist对象
        let data = [...iconSource];

        // 先清空
        data.splice(0, data.length)

        // 填充新数据
        // eslint-disable-next-line array-callback-return
        res.data?.map((item: string)=>{
          data.push({
            label: <Avatar src={"/static/icons/"+item}/>,
            value: item,
          })
        })
        setIconSource(data)
      }
    })
  }, []);

  return (
    <ModalForm
      title={"修改"}
      visible={props.modalVisible}
      width={830}
      formRef={formRef}
      // Drawer抽屉需要关联上层UpdateForm的点击管理函数
      onFinish={props.onSubmit}
      modalProps={{
        destroyOnClose: true,
        // 抽屉层关闭函数， 需要关联上层的onCancel函数
        onCancel: function (){
          props.onCancel()
        },
      }}
    >
      <ProFormText
        name={"icon"}
        hidden
      />
      <ProFormText
        name={"name"}
        label={"名称"}
        initialValue={props.values.name}
        rules={[{required: true, message: "必填！"}]}
      />
      <Row style={{marginBottom: 10}}>
        <span style={{marginBottom: 8}}>成员图标</span>
        <Col span={24} style={{height: `calc(100vh - 420px)`, overflowY: "auto"}}>
          <Selector
            key={Date.now()}
            columns={5}
            options={iconSource}
            defaultValue={defaultType}
            multiple={false}
            showCheckMark={true}
            style={{
              // '--checked-color': "#fa541c",
              // '--checked-text-color': "white",
              '--gap': "3px",
            }}
            onChange={(value)=>{
              formRef.current?.setFieldsValue({
                icon: value[0]
              })
            }}
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default IconUpdateForm;
